<template>
  <div>
    <el-main>
      <div style="margin-bottom: 30px"></div>

      <div style="margin: 10px 0">
        <el-button type="primary" @click="handleAddReply">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
        <el-input v-model="msg" @input="changeMessage(msg)" style="width: 200px;margin-left: 1300px;margin-right: 5px" placeholder="请输入问题描述" suffix-icon="el-icon-search"></el-input>
        <el-button type="primary" @click="handleSearch(msg,questPageSize)">搜索</el-button>
      </div>
      <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
        <el-table-column prop="content" :show-overflow-tooltip="true" label="描述" width="1000"></el-table-column>
        <el-table-column label="创建人" width="150" align="center">
          <template slot-scope="scope">{{scope.row.user.cardname}}</template>
        </el-table-column>
        <el-table-column prop="createTime" :formatter="dateTimeFormatter"
                         label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="dialogDetailReplyOpen(scope.row)">详情</el-button>
            <el-button type="success" plain @click="dialogEditReplyOpen(scope.row)"
                       style="margin-left: 10px; margin-right: 10px">编辑</el-button>
            <el-popconfirm
              confirm-button-text='确认'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除这一条问答吗？"
              @confirm="deleteReply(scope.row.id)">
              <el-button type="danger" plain slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="replyCurrent"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="replyPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="replyTotal">
        </el-pagination>
      </div>
      <el-dialog title="语料" :visible.sync="dialogReplyVisible" align="center" @close="replyClose" :close-on-click-modal="false">
        <el-form :v-model="replyDetailFrom" :label-width="formLabelWidth" @submit.native.prevent>
          <el-form-item label="应答语料: " :label-width="formLabelWidth"
                        style="margin-right: 45px">
            <el-input type="textarea" v-model="replyDetailFrom.content"
                      autocomplete="off" :autosize="{ minRows: 7, maxRows: 7 }"
                      :readonly="!editReplyVisible" value=""></el-input>
          </el-form-item>
          <el-form-item v-show="editReplyVisible">
            <el-button type="primary" @click="replyOnSubmit(replyDetailFrom.id)">保存</el-button>
            <el-button @click="resetReplyValue">重置</el-button>
          </el-form-item>
        </el-form>
        <div align="left" style="margin-bottom: 10px;margin-top: 15px">
          <el-button type="primary" @click="handleAddQuest">新增语料提问</el-button>
        </div>
        <el-table :data="questData" style="font-size: 13px"
                  border stripe :header-cell-class-name="headerBg">
          <el-table-column label="语料提问" width="700" prop="content" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="dialogQuestDetailVisible(scope.row)">详情</el-button>
              <el-button type="success" plain @click="editQuest(scope.row)"
                         v-show="editReplyVisible" style="margin-left: 10px; margin-right: 10px">编辑</el-button>
              <el-popconfirm
                confirm-button-text='确认'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除这一条问答吗？"
                @confirm="deleteQuest(scope.row.id)">
                <el-button type="danger" plain slot="reference" v-show="editReplyVisible">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination
            @size-change="handleSizeChangeQuest"
            @current-change="handleCurrentChangeQuest"
            :current-page="questCurrent"
            :page-sizes="[2, 5, 10]"
            :page-size="questPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="questTotal">
          </el-pagination>
        </div>
      </el-dialog>
      <el-dialog title="编辑-语料提问" :visible.sync="dialogQuestEditVisible" @submit.native.prevent
                 margin-top="30vh" width="30%" :close-on-click-modal="false" @close="questClose" append-to-body>
        <el-form v-model="questDetailFrom">
          <el-form-item>
            <el-input type="textarea" v-model="questDetailFrom.content"
                      autocomplete="off" :autosize="{ minRows: 7, maxRows: 7 }"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-top: 20px" align="right">
          <el-button type="primary" @click="questOnSubmit(questDetailFrom)">保存</el-button>
          <el-button @click="dialogQuestEditVisible = false">取消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新增语料" :visible.sync="dialogAddReplyFormVisible"
                 :close-on-click-modal="false"  width="45%">
        <el-form :label-width="formLabelWidth" align="center">
          <el-form-item label="问题: " style="margin-right: 30px">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 5 }" v-model="replyForm.quest" placeholder="请输入问题" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="回答: " style="margin-right: 30px">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 5 }" v-model="replyForm.reply" placeholder="请输入回答" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="replyContentOnSubmit">保 存</el-button>
          <el-button @click="dialogAddReplyFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新增语料提问" :visible.sync="dialogAddQuestFormVisible"
                 :close-on-click-modal="false"  width="45%">
        <el-form :label-width="formLabelWidth" align="center">
          <el-form-item label="语料提问: " style="margin-right: 30px">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 5 }" v-model="questForm.quest" placeholder="请输入问题" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="questContentOnSubmit">保 存</el-button>
          <el-button @click="dialogAddQuestFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="语料提问详情" :visible.sync="questDetailVisible"
                 margin-top="30vh" width="50%" append-to-body><span></span>
        <el-table :data="questDetailData" style="font-size: 13px" border stripe :header-cell-class-name="headerBg">
          <el-table-column label="问题详情" prop="content" width="650"></el-table-column>
          <el-table-column align="center" label="创建人" prop="cardname" width="80"></el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime" :formatter="dateTimeFormatter"></el-table-column>
        </el-table>
        <br/><br/>

      </el-dialog>

    </el-main>
  </div>
</template>

<script>
  import axios from "axios";
  import moment from "moment";
  import store from '@/assets/store'

  export default {
    name: "Reply",
    data() {
      return{
        baseURL: 'http://localhost:8082',
        tableData: [],
        replyTotal: 0,
        replyPageSize: 10,
        replyCurrent: 1,
        questTotal: 0,
        questPageSize: 5,
        questCurrent: 1,
        replyValue: '',
        questValue: '',
        msg: '',
        questData: [],
        questDetailData: [{
          content: '',
          cardname:'',
          createTime:'',
        }],
        replyDetailFrom: {},
        questDetailFrom: {},
        dialogReplyVisible: false,
        questDetailVisible: false,
        editReplyVisible: false,
        dialogQuestEditVisible: false,
        dialogAddReplyFormVisible: false,
        dialogAddQuestFormVisible: false,

        replyId: 1,
        replyForm: {},
        questForm: {},
        headerBg: "headerBg",
        formLabelWidth: "90px"
      }
    },
    created() {
      //请求分页查询数据
      this.load()
    },
    methods: {
      //页面初始化加载
      load(){
        this.request.post("/chat-reply/find-page-chat-reply?").then((res) => {
          this.tableData = res.data;
          this.replyTotal = res.data.length;
        });
      },

      //搜索问答问题
      handleQuestSearch(){
        axios({
          method:'post',
          params:{
            chatReplyId: this.replyId,
            pageNum: this.questCurrent,
            pageSize: this.questPageSize,
          },
          url: this.baseURL+'/chat-quest/find-page-chat-quest-by-chat-reply-id?'
        }).then((res)=>{
          this.questData = res.data.data.records
          this.questTotal = res.data.data.total
          this.questCurrent = res.data.data.current
          this.questPageSize = res.data.data.size
        })
      },
      //搜索功能 同时用于数据更改后的页面刷新
      handleSearch() {
        axios({
          method:'post',
          params:{
            content: this.msg,
            pageNum: this.replyCurrent,
            pageSize: this.replyPageSize,
          },
          url: this.baseURL+'/chat-reply/find-page-chat-reply?'
        }).then((res)=>{
          this.tableData = res.data.data.records
          this.replyTotal = res.data.data.total
          this.replyCurrent = res.data.data.current
          this.replyPageSize = res.data.data.size
        })
      },

      dialogDetailReplyOpen(row) {
        this.dialogReplyVisible = true
        this.editReplyVisible = false
        this.replyDetailFrom = row
        this.replyId = row.id
        this.handleQuestSearch()
        this.replyValue = this.replyDetailFrom.content
      },
      dialogEditReplyOpen(row) {
        this.dialogReplyVisible = true
        this.editReplyVisible = true
        this.replyDetailFrom = row
        this.replyId = row.id
        this.handleQuestSearch()
        this.replyValue = this.replyDetailFrom.content
      },
      dialogQuestDetailVisible(row){
        this.questDetailData[0].content = row.content
        this.questDetailData[0].cardname = row.user.cardname
        this.questDetailData[0].createTime = row.createTime
        this.questDetailVisible = true
      },

      handleAddReply(){
        this.dialogAddReplyFormVisible = true
        this.replyForm = {}
      },
      handleAddQuest(){
        this.dialogAddQuestFormVisible = true
        this.questForm = {}
      },
      replyContentOnSubmit(){
        axios({
          method:'post',
          params:{
            id: localStorage.getItem("id"),
            chatQuest: this.replyForm.quest,
            chatReply: this.replyForm.reply,
          },
          url: this.baseURL+'/chat-reply/add-chat-reply-and-chat-quest?'
        }).then((res)=>{
          if(res){
            if(res.data.status == "SUCCESS"){
              this.$message.success("新增交谈回答成功！")
              this.dialogAddReplyFormVisible = false
              this.handleSearch()
            } else {
              this.$message.error("新增交谈回答失败！失败原因：" + res.data.msg)
            }
          }
        }).catch(error =>{
          this.$message.error("新增交谈回答失败！失败原因： "+ error)
        })
      },
      questContentOnSubmit(){
        axios({
          method:'post',
          params:{
            createUserId: localStorage.getItem("id"),
            chatQuestcontent: this.questForm.quest,
            chatReplyContent: this.replyValue,
          },
          url: this.baseURL+'/chat-quest/add?'
        }).then((res)=>{
          if(res){
            if(res.data.status == "SUCCESS"){
              this.$message.success("新增交谈问题成功！")
              this.dialogAddQuestFormVisible = false
              this.handleQuestSearch()
            } else {
              this.$message.error("新增交谈问题失败！失败原因：" + res.data.msg)
            }
          }
        }).catch(error =>{
          this.$message.error("新增交谈回答失败！失败原因： "+ error)
        })
      },

      deleteReply(id){
        axios({
          method:'post',
          params:{
            id: id
          },
          url: this.baseURL+'/chat-reply/delete-chat-reply-by-id?'
        }).then((res)=>{
          if(res.data.status == "SUCCESS" && res.status == 200){
            this.$message.success("删除语料成功！")
            this.handleSearch()
          } else {
            this.$message.error("删除语料失败！")
          }
        })
      },
      deleteQuest(id){
        axios({
          method:'post',
          params:{
            id: id
          },
          url: this.baseURL+'/chat-quest/delete-quset-by-id?'
        }).then((res)=>{
          if(res.data.status == "SUCCESS" && res.status == 200){
            this.$message.success("删除语料成功！")
            this.handleQuestSearch()
          } else {
            this.$message.error("删除语料失败！")
          }
        })
      },

      replyOnSubmit(){
        axios({
          method:'post',
          params:{
            id: this.replyDetailFrom.id,
            content: this.replyDetailFrom.content
          },
          url: this.baseURL+'/chat-reply/update-chat-reply-by-id?'
        }).then((res)=>{
          if(res.data.status == "SUCCESS" && res.status == 200){
            this.dialogReplyVisible = false
            this.$message.success("编辑语料成功！")
            this.handleSearch()
          } else {
            this.$message.error("编辑语料失败！")
          }
        })
      },
      questOnSubmit(row){
        axios({
          method:'post',
          params:{
            id: row.id,
            content: row.content
          },
          url: this.baseURL+'/chat-quest/update-chat-quest-by-id?'
        }).then((res)=>{
          if(res.data.status == "SUCCESS" && res.status == 200){
            this.dialogQuestEditVisible = false
            this.$message.success("编辑语料问题成功！")
            this.handleQuestSearch()
          } else {
            this.$message.error("编辑语料问题失败！")
          }
        })
      },
      //重置回答内容
      resetReplyValue(){
        this.replyDetailFrom.content = this.replyValue
      },
      //回答对话框关闭时 恢复未保存的值
      replyClose(){
        this.replyDetailFrom.content = this.replyValue
      },
      //问答对话框关闭时 恢复未保存的值
      questClose(){
        this.questDetailFrom.content = this.questValue
      },
      //编辑问答内容
      editQuest(row){

        this.questDetailFrom = row
        this.questValue = this.questDetailFrom.content
        this.dialogQuestEditVisible = true
      },

      //搜索input框值实时显示
      changeMessage(msg) {
        this.msg = msg;
        //强制刷新渲染
        this.$forceUpdate();
      },

      //分页控制
      handleSizeChange(pageSize) {
        this.replyPageSize = pageSize;
        this.handleSearch();
      },
      handleCurrentChange(pageNum) {
        this.replyCurrent = pageNum;
        this.handleSearch();
      },
      handleSizeChangeQuest(questPageSize){
        this.questPageSize = questPageSize
        this.handleQuestSearch()
      },
      handleCurrentChangeQuest(questCurrent){
        this.questCurrent = questCurrent
        this.handleQuestSearch()
      },
      //日期格式
      dateTimeFormatter(row, column) {
        var dateTime = row[column.property];
        if (dateTime === undefined) {
          return "";
        }
        return moment(dateTime).format("YYYY-MM-DD HH:mm:ss");
      },
    }
  }
</script>

<style>

.headerBg {
  background: #eee !important;
}

.el-tooltip__popper{
  max-width:20%;
}

</style>
